<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>input type=radio 单选按钮</h4>
        <!-- 
            表单提交时，对于单选按钮 没有定义value属性时 默认值为 on , 表示单选按钮被选择 
                       单选按钮想要实现分类数据提交，必须定义value用于描述分类中的各个类别数据
                       对于单选按钮的默认选中操作，通过定义布尔类型属性 checked 描述选中状态
            表单提交时，对于复选按钮 没有定义value属性时 默认值为 on , 表示复选按钮被选择
                       复选按钮想要实现分类数据提交(数据关系)，必须定义value用于描述分类中的各个类别数据
                       对于复选按钮的默认选中操作，通过定义布尔类型属性 checked 描述选中状态
        -->
        <form action="">
            <h5>原始功能描述</h5>
            <label>
                <input type="radio" value="电信" name="a">电信
            </label>
            <label>
                <input type="radio" value="移动" name="a" checked>移动
            </label>
            <label>
                <input type="radio" value="联通" name="a">联通
            </label>
            <br><br>
            <label>
                <input type="checkbox" value="HTML" name="skill" checked>HTML
            </label>
            <label>
                <input type="checkbox" value="CSS" name="skill">CSS
            </label>
            <label>
                <input type="checkbox" value="JS" name="skill" checked>JS
            </label>
            <input type="submit" value="提交">
        </form>
        <h5>vue的v-model控制单选按钮</h5>
        <p>radioData：{{ radioData }}</p>
        <!-- 
            v-model完成单选按钮绑定，实际上就是 v-bind:checked 属性的绑定，和v-on:change事件的绑定
                                    无论是 事件 还是 checked 都依赖于 value属性的取值
            !! 单选按钮使用v-model必须定义value,单选分组互斥功能由绑定的变量决定,默认选中效果由变量取值决定
        -->
        <label>
            <input type="radio" value="电信" :checked=" radioData=='电信' " @change=" radioData=$event.target.value ">电信
        </label>
        <label>
            <input type="radio" value="移动" :checked=" radioData=='移动' " @change=" radioData=$event.target.value ">移动
        </label>
        <label>
            <input type="radio" value="联通" :checked=" radioData=='联通' " @change=" radioData=$event.target.value ">联通
        </label>
        <br><br>
        <p>radioData1：{{ radioData1 }}</p>
        <label>
            <input type="radio" value="电信" v-model="radioData1">电信
        </label>
        <label>
            <input type="radio" value="移动" v-model="radioData1">移动
        </label>
        <label>
            <input type="radio" value="联通" v-model="radioData1">联通
        </label>

        <h5>vue的v-model控制复选按钮</h5>
        <p>使用和绑定方式1：状态记录</p>
        <!-- 
            v-model 完成复选框状态绑定时，实际上就是 v-bind:checked 和 v-on:change 的绑定
                    但因为使用的是状态记录模式，所以 value 和 name 对于该模式下的复选框没有实际的定义意义
                    默认情况下 v-model 对绑定的变量返回 true 或 false，当然也可以通过修改 true-value 和 false-value 属性
                    改变变量返回值
         -->
        <p>checkData1：{{ checkData1 }}</p>
        <label>
            <input type="checkbox" :checked="checkData1"  @change=" checkData1=$event.target.checked ">七天免登录
        </label>
        <label>
            <input type="checkbox" value="asdasdasd" v-model="checkData1">七天免登录
        </label>
        <br>
        <p>checkData2：{{ checkData2 }}</p>
        <label>
            <input type="checkbox" true-value="是" false-value="否" v-model="checkData2">七天免登录
        </label>
        <br><br>
        <p>使用和绑定方式2：数据记录</p>
        <!-- 
            当v-model 在复选按钮绑定中，取值为数组数据，默认开启数据记录模式
                当启用数据记录模式时，复选框的操作会在数组中添加或删除对应数据，
                添加的数据和删除的数据来自于被操作的复选框value => 【vue2 会在没有定义value时返回null】【vue3 会在没有定义value时返回on】
        -->
        <p>checkData3：{{ checkData3 }}</p>
        <label>
            <input type="checkbox" value="HTML" v-model="checkData3">HTML
        </label>
        <label>
            <input type="checkbox" value="CSS" v-model="checkData3">CSS
        </label>
        <label>
            <input type="checkbox" value="JS" v-model="checkData3">JS
        </label>
        <hr>
        <p>userSkill:{{ userSkill }}</p>
        <ul>
            <li v-for=" s in skills">
                <label>
                    <input type="checkbox" :value="s" v-model="userSkill">{{ s }}
                </label>
            </li>
        </ul>
        <input type="button" value="根据选中清除可选项" @click="removeItem()">
        <!-- <ul>
            <li v-for=" s in skills">
                <label>
                    <input type="checkbox" :value="s" v-model="skills">{{ s }}
                </label>
            </li>
        </ul> -->
        <br><br>
        <p>selectGoods：{{ selectGoods }}</p>
        <ul>
            <li v-for="item in goods">
                <label>
                    <!-- 
                        vue中 单选按钮和复选按钮的 value 是可以接收除字符串以外的任何类型数据，并且会保留数据类型 
                        如果绑定的是引用数据，操作的就是地址
                        如果选中项默认存在记录，该记录和构成数据直接没有引用指向关系，vue是通过属性统一判断的方式完成匹配的
                    -->
                    <input type="checkbox" :value="item" v-model="selectGoods">{{ item }}
                </label>
                
            </li>
        </ul>
        <input type="button" value="删除选中项" @click="removeGoodsItem()">
        <hr>
        <ul>
            <li v-for="item in goods2">
                <label>
                    <!-- vue 的v-model绑定的对象中属性变量，如果初始未被定义，v-model在操作过程会自动的构建响应式数据记录 -->
                    <input type="checkbox" v-model="item.state">{{ item }}
                </label>
                
            </li>
        </ul>
        <input type="button" value="删除选中项" @click="removeGoodsItem2()">
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    radioData:"移动",
                    radioData1:"联通",
                    checkData1:false,
                    checkData2:'是',
                    checkData3:[],
                    // 提供所有复选框选项的构成数据
                    skills:[ "HTML","CSS","JS","VUE","REACT" ],
                    // 记录被选中的数据
                    userSkill:["CSS","JS"],
                    goods:[
                        { name:"aaaa" },
                        { name:"bbbb" },
                        { name:"cccc" },
                        { name:"dddd" }
                    ],
                    selectGoods:[
                        { name:"cccc" }
                    ],
                    goods2:[
                        { name:"aaaa" },
                        { name:"bbbb" ,state:true},
                        { name:"cccc" },
                        { name:"dddd" }
                    ],
                }
            },
            methods:{
                removeItem(){
                    this.userSkill.forEach(item => {
                        let i = this.skills.indexOf(item);
                        if(i!=-1){
                            this.skills.splice(i,1)
                        }
                    });
                    this.userSkill = [];
                },
                removeGoodsItem(){
                    this.selectGoods.forEach(item => {
                        // 该操作对于 默认记录的选中数据的判断 是无效 【引用地址不同】
                        let i = this.goods.indexOf(item);
                        if(i!=-1){
                            this.goods.splice(i,1)
                        }
                    });
                    this.selectGoods = [];
                },
                removeGoodsItem2(){
                    this.goods2 = this.goods2.filter(item=>{
                        return !item.state
                    })
                }
            }
        }).mount("#app")
    </script>
</body>
</html>